﻿<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
	<%@include file="../include/taglib.jsp"%>
		<html>

		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
			<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
			<meta name="apple-mobile-web-app-capable" content="yes">
			<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<meta name="format-detection" content="telephone=no">
			<link rel="apple-touch-icon-precomposed" href="${ctxAssets}/img/m/images/icon/logo-icon.png">
			<title>关于关拓 | ${compName }</title>
			<meta name="keywords" content="${seoName }">
			<meta name="description" content="${seoName }">
			<link href="${ctxAssets}/css/m/theme/default/style.css" rel="stylesheet" type="text/css">
			<!--mui-->
			<script src="${ctxAssets}/plugin/mui/js/mui.min.js"></script>
			<link href="${ctxAssets}/plugin/mui/css/mui.min.css" rel="stylesheet" />
			<!--<meta id="token" name="token" value="{{csrf_token()}}">-->
			<!--<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>-->
			<script type="text/javascript" charset="utf-8">
				mui.init();
				G_WEB_ROOT = "<%=basePath%>";
			</script>
		</head>

		<body>
			<template id="loading-template">
				<div class="loading-overlay">
					<div class="sk-three-bounce">
						<div class="sk-child sk-bounce1"></div>
						<div class="sk-child sk-bounce2"></div>
						<div class="sk-child sk-bounce3"></div>
						<!--<img src="${ctxAssets}/img/loading.gif"/>-->
					</div>
				</div>
			</template>
			<div id="help">
				<loading v-show="showLoading"></loading>
			</div>


			<div id="wrapper">
				<div id="header">
					<em class="logo">${compName }</em>
					<em></em>
					<a href="${ctx }/m/catalog" class="siteMap"></a>
				</div>
				<div id="app">
					<form v-el: "form">
						<validator name="validation1">
							<div class="mui-content-padded" style="margin:5px;">
								<h5>姓名:</h5>
								<div class="mui-input-row">
									<input name="username" v-model="username" type="text" class="mui-input-clear dataInput" placeholder="请输入姓名" v-validate:username="{ required:true, minlength: 2, maxlength: 4 }">
									<p v-if="$validation1.username.required" class="error">用户名不能为空</p>
									<p v-if="$validation1.username.minlength" class="error">不得少于2个字符</p>
									<p v-if="$validation1.username.maxlength" class="error">不得大于4个字符</p>
								</div>
								<h5>手机号码:</h5>
								<div class="mui-input-row">
									<input type="text" class="mui-input-clear dataInput" placeholder="请输手机号码" v-model="userphonenum" v-validate:userphonenum="{ required:true, minlength: 11, maxlength: 12 }">
									<p v-if="$validation1.userphonenum.required" class="error">手机号码不能为空</p>
									<p v-if="$validation1.userphonenum.minlength" class="error">不得少于11个字符</p>
									<p v-if="$validation1.userphonenum.maxlength" class="error">不得大于12个字符</p>
								</div>
								<h5>身份证号:</h5>
								<div class="mui-input-row mui-password">
									<input type="text" class="mui-input-password dataInput" placeholder="请输身份证号" v-model="useridcard" v-validate:useridcard="{ required:true, minlength: 11, maxlength: 19 }">
									<span class="mui-icon mui-icon-eye mui-active"></span>
									<p v-if="$validation1.useridcard.required" class="error">身份证号不能为空</p>
									<p v-if="$validation1.useridcard.minlength" class="error">不得少于11个字符</p>
									<p v-if="$validation1.useridcard.maxlength" class="error">不得大于19个字符</p>
								</div>
								<h5>是否办理过分期:</h5>
								<div class="mui-input-row">
									<input type="text" class="mui-input-clear dataInput" v-model="userstages" v-validate:userstages="{ required:true }">
									<p v-if="$validation1.userstages.required" class="error">是否办理过分期不能为空</p>
								</div>
								<h5>描述:</h5>
								<div class="mui-input-row" style="margin: 10px 5px;">
									<textarea rows="5" class="dataInput" v-model="usernote" placeholder="如有办理那些过分期或APP公众号网贷的请在些填写，和是否还完或几期。 "></textarea>
								</div>
								<div class="mui-button-row">
									<button type="button" class="btn btn-primary" @click="submitForm">马上办理</button>
								</div>
							</div>
						</validator>
					</form>
				</div>
			</div>
			<script src="http://cdn.bootcss.com/vue/1.0.15-csp/vue.min.js"></script>
			<script src="http://cdn.bootcss.com/vue-validator/2.0.1/vue-validator.min.js"></script>
			<script src="http://cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script>
			<script src="${ctxAssets}/js/biz/mOnlineOpt.js"></script>

			<style>
				.loading-overlay {
					content: "";
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1000;
					opacity: 1;
					background: rgba(0, 0, 0, 0.5);
					transition: all .6s;
				}

				.sk-three-bounce {
					position: absolute;
					top: 50%;
					left: 45%;
				}

				.sk-three-bounce .sk-child {
					width: 20px;
					height: 20px;
					background-color: #31b0d5;
					border-radius: 100%;
					display: inline-block;
					-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
					animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
				}

				.sk-three-bounce .sk-bounce1 {
					-webkit-animation-delay: -0.32s;
					animation-delay: -0.32s;
				}

				.sk-three-bounce .sk-bounce2 {
					-webkit-animation-delay: -0.16s;
					animation-delay: -0.16s;
				}

				@-webkit-keyframes sk-three-bounce {
					0%,
					80%,
					100% {
						-webkit-transform: scale(0);
						transform: scale(0);
					}
					40% {
						-webkit-transform: scale(1);
						transform: scale(1);
					}
				}
				@keyframes sk-three-bounce {
					0%,
					80%,
					100% {
						-webkit-transform: scale(0);
						transform: scale(0);
					}
					40% {
						-webkit-transform: scale(1);
						transform: scale(1);
					}
				}
			</style>
			<%@include file="../include/footer.jsp"%>
		</body>

		</html>